<!doctype html>
<html>
  <head>
    <title>Sandstorm template</title>
    <style>
body {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}
#text {
  margin: 0;
  padding: 0;
}
#clipboard {
  display: none;
  position: absolute;
  width: 16px;
  height: 16px;
  background: #FFFFFF url(clipboard-m.svg) 50% 50% no-repeat;
  cursor: pointer;
  border: 0;
}
#clipboard:focus {
  outline: 0;
}
#clipboardSuccess {
  display: none;
  position: absolute;
  top: 0;
  font-family: monospace;
  background-color: #000;
  color: #FFF;
  padding: 1px 4px;
  border-radius: 2px;
}

.clipboardLeft #clipboard {
  display: block;
  top: 0;
  left: 0;
}
.clipboardLeft #container {
  overflow: auto;
  margin-left: 20px;
}
.clipboardLeft #clipboardSuccess {
  left: 20px;
}
.clipboardRight #clipboard {
  display: block;
  top: 0;
  right: 0;
}
.clipboardRight #container {
  overflow: auto;
  margin-right: 20px;
}
.clipboardRight #clipboardSuccess {
  right: 20px;
}
    </style>
  </head>
  <body>
    <!-- Since <pre> doesn't bound selection, this needs to all be on the same line,
         or copying by triple-click or the clipboard button will capture additional
         newlines in Firefox. -->
    <div id="container"><pre id="text"></pre></div>
    <button id="clipboard" aria-label="Copy" data-clipboard-target="#text"></button>
    <div id="clipboardSuccess">copied</div>

<script src="clipboard.js"></script>
<script>
// Templates are namespaced in sessionStorage by the prefix "offerTemplate"
var templateToken = "offerTemplate" + window.location.hash.substring(1);
var record = JSON.parse(sessionStorage.getItem(templateToken));
var textElement = document.getElementById("text");
textElement.textContent = record.renderedTemplate;
if (record.link) {
  var container = document.getElementById("container");
  var link = document.createElement("a");
  link.href = record.link;
  link.target = "_blank";
  link.id = "link";

  container.appendChild(link);
  container.removeChild(textElement);
  link.appendChild(textElement);
}

if(record.clipboardButton && record.clipboardButton !== "none") {
  if(record.clipboardButton === "left") {
    document.body.className = document.body.className + " clipboardLeft";
  }
  if(record.clipboardButton === "right") {
    document.body.className = document.body.className + " clipboardRight";
  }

  var clipboard = new Clipboard("#clipboard");
  clipboard.on('success', function() {
    var success = document.getElementById("clipboardSuccess");
    success.style.display = 'block';
    setTimeout(function() {
      success.style.display = 'none';
    }, 1000);
  });
}

// Clean up sessionStorage templates that have expired.
// First, collect expired template keys
var i;
var toDelete = [];
for (i = 0; i < sessionStorage.length ; i++) {
  var key = sessionStorage.key(i);
  // we only care about templates
  if (key.startsWith("offerTemplate")) {
    var data = sessionStorage.getItem(key);
    if (data.expires < Date.now()) {
        toDelete.push(key);
    }
  }
}
// Then, wipe expired keys.
for (i = 0; i < toDelete.length; i++) {
  sessionStorage.removeItem(toDelete[i]);
}

var selfDestructDuration = 5 * 60 * 1000;

var apiUrl = window.location.protocol + "//" + record.host;
setInterval(function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
       if (xhr.status == 200) {
          record.expires = Date.now() + selfDestructDuration;
          sessionStorage.setItem(templateToken, JSON.stringify(record));
       } else {
          var errorText = "Error refreshing token. Reloading the page might help.";
          console.error(xhr.responseText);
          var textElement = document.getElementById("text");
          textElement.textContent = errorText;
          var link = document.getElementById("link");
          if (link) {
            var container = document.getElementById("container");
            container.removeChild(link);
            container.appendChild(textElement);
          }
       }
    }
  };

  xhr.open("POST", apiUrl, true);
  xhr.setRequestHeader("Authorization", "Bearer " + record.token);
  xhr.setRequestHeader("X-Sandstorm-Token-Keepalive", selfDestructDuration.toString());
  xhr.send();
}, 60000);
</script>
  </body>
</html>
